<template>
  <div class="signup" v-if="iswindowVisble">
    <p class="closeWindow" @click="closeWindow"><el-icon>
        <CloseBold />
      </el-icon></p>
    <h2 class="signup-title">报名参赛</h2>

    <div class="messege">
      <form @submit.prevent="submitForm">
        <div class="signup-info">
          <label class="signup-info" for="name">姓名：</label>
          <input type="text" id="name" v-model="formData.name" required>
        </div>
        <div class="signup-info">
          <label for="phone">电话：</label>
          <input type="text" id="phone" v-model="formData.phone" required>
        </div>
        <div class="signup-info">
          <label for="academy">院系：</label>
          <input type="text" id="academy" v-model="formData.academy" required>
        </div>
        <el-button class="signup-button" :plain="true" @click="submitForm, open">确认</el-button>
      </form>
    </div>

  </div>
</template>


<script >
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { GetUserInfo, PostAddtest } from '@/api/front/contest.js'
import { useStore } from 'vuex';

export default {
  setup() {
    const formData = ref({
      // id:2,
      name: '',
      phone: '',
      academy: ''
    });
    const store = useStore();
    // const token =userInfo.token
    const userInfo = store.state.userInfo
    const data = {
      id: userInfo.userId
    }

    const getuserinfo = async () => {
      const response = await GetUserInfo(data)
      console.log(response.data);
      formData.value.name = response.data.username;
      formData.value.phone = response.data.phone;
      formData.value.academy = response.data.academy;

    }
    onMounted(() => {
      getuserinfo();
    })

    //提交表单
    const submitForm = () => {
      if (this.formData.name && this.formData.phone && this.formData.academy) {
        PostAddtest(this.formData)
          .then(response => {
            // 表单提交成功后的逻辑，如打印成功的消息、跳转路由等
            ElMessage({
              showClose: true,
              message: '报名成功！',
              type: 'success',
            })
            console.log("表单提交成功", response.data);
          })
          .catch((error) => {
            // 表单提交失败后的逻辑，如弹窗提示错误、处理网络异常等
            ElMessage({
              showClose: true,
              message: '你已经报名成功，无需重复报名！',
              type: 'warning',
            })
            console.error("表单提交失败", error);
          });
      } else {
        // 如果表单验证不通过，可以给出相应的提示
        console.log("请填写完整的信息");
      }
    };

    
    //关闭窗口操作
    const iswindowVisble = ref(true);
    const closeWindow = () => {
      iswindowVisble.value = false;
      console.log("关闭报名窗口");
    }


    return {
      formData,
      // submitForm,
      iswindowVisble,
      closeWindow,
      open,
      submitForm
    };
  }
};

// const props = defineProps(['loginState', 'userInfo']);
// console.log(props); // 输出 {"loginState": true, "userInfo": {userId: 0, roleId: 0, role: '', username: '', avatar: ''}}

// const account = ref({
//   user_id: 1,
//   nickn_name: 'John Doe',
//   phone: '1234567890',
//   academy: '智能制造学院'
// })


</script>

<style scoped lang="scss">
.signup {
  /* display: flex;
    flex-direction: column;
    align-items: center; */
  position: relative;
  margin: 100px auto;
  width: 300px;
  height: 350px;
  // background-color: #E1F4CF;
  border: 1px solid gray;
  border-radius: 10px;
  box-shadow: 0px 2px 6px gray;

  .closeWindow {
    position: absolute;
    top: 8px;
    right: 0;
    font-size: 20px;
    margin-right: 15px;
    cursor: pointer;
  }

  .messege {
    margin: 30px 30px 0 30px;
  }
}

.succeed {
  position: absolute;
  top: 350px;
  left: 665px;
  z-index: 9999;
  // margin: -300px auto;
  // width: 200px;
  // height: 40px;
  font-size: 20px;
  // border: 1px solid gray;
  border-radius: 4px;
  box-shadow: 0 12px 12px rgba(0, 0, 0, .15);
  text-align: center;
  line-height: 40px;

  .el-icon {
    color: green;
  }
}

.signup-title {
  font-size: 20px;
  font-weight: bold;
  margin: 23px 0 0 19px;
}

.signup-info {
  font-size: 16px;
  margin-bottom: 15px;

  input {
    // border: 0;
    outline: none;
  }
}

.signup-button {
  padding: 10px 20px;
  background-color: #BFC1FB;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 150px;
  height: 40px;
  font-weight: 700;
  border-radius: 20px;
  border: none;
  margin: 20px 45px;
}

// 提示框渐变消失
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
